import React from 'react'
import { Row, Col, Button, Modal,message} from 'antd'
import { connect } from 'dva'
import styles from './noticeManage.css'
import AddNoticeModal from './noticeModal'
import NoticeTable from './noticeTable'
const confirm = Modal.confirm;
class NoticeManage extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            visible:false,
            updateData:[]
        }
    }
    //新增通知
    addNotice =()=>{
        this.setState({
            visible:true
        })
    }
   
    //弹框确定按钮
    onOk =()=>{
        const {updateData} = this.state;
        console.log(updateData)
        this.form.validateFields((err,values)=>{
            if(err){
                return
            }
            if(updateData.length == 0){
                this.props.dispatch({
                    type:'noticeManage/AddNotice',
                    payload:values
                })
            }else{
                this.props.dispatch({
                    type: 'noticeManage/updateNoticeDetail',
                    payload:{
                        rowguid: updateData.rowguid,
                        republicName: values.republicName,
                        republicContent: values.republicContent,
                    }
                })
            }
            this.setState({
                visible:false,
                updateData:[],
            })
            this.form.resetFields();
        })
        
    }
    //弹框取消按钮
    onCancel =()=>{
        this.setState({
            visible:false
        })
        this.form.resetFields();
    }
    //批量删除
    deleteNotice =()=>{
        const {deleteId} = this.props.noticeManage;
        const {dispatch} = this.props;
        confirm({
            title: '确定删除所选通知？',
            content: '请谨慎删除！',
            okText: '确定',
            cancelText: '取消',
            onOk() {
                if (!deleteId.length) {
                    message.error('请选择勾选通知')
                    return
                }
                dispatch({
                    type: 'noticeManage/DeleteNotice',
                    payload:  deleteId 
                })
            },
            onCancel() {
            },
        });
    }
    //获取弹框dom
    modalForm =(form)=>{
        this.form = form;
    }
    //更新修改的数据
    updateNotice =(data)=>{
        this.setState({
            visible:true,
            updateData:data,
        })
    }
    render(){
        const { visible,updateData} = this.state;
        const {noticeList,allCount } = this.props.noticeManage;
        return (
            <div className={styles.content}>
                <Row>
                    <Col span={15} className={styles.col}>
                        <span className={styles.icon}>通知管理</span>
                    </Col>
                    <Col span={3} className={styles.col}>
                        <Button className={styles.Button} type="primary" onClick={this.addNotice}>新增通知</Button>
                    </Col>
                    <Col span={3} className={styles.col}>
                        <Button className={styles.Button} onClick={this.deleteNotice}>删除</Button>
                    </Col>
                </Row>
                <AddNoticeModal
                    data={updateData}
                    ref={this.modalForm}
                    visible={visible}
                    onOk={this.onOk}
                    onCancel={this.onCancel}
                />
                <NoticeTable
                    updateNotice={this.updateNotice}
                    tableList={noticeList}
                    allCount={allCount}
                />
            </div>
        )
    }
}
export default connect(({ noticeManage }) => ({ noticeManage}))(NoticeManage);